<!-- template inhertance -->
<extend name="layout/layui24"/>

<!-- styles -->
<block name="linkcss">
    <style>
        .samples-header .samples-row {
            font-size: 36px;
        }
        .samples-header .samples-row small {
            font-size: 50%;
        }
        .samples-content .file-item {
            padding: 10px;
        }
        .layui-progress .layui-progress-success{
            background-color: #5cb85c;
        }
        .layui-progress .layui-progress-warning{
            background-color: #f0ad4e;
        }
    </style>
</block>

<!-- scripts -->
<block name="linkjs">

</block>

<!-- page title -->
<block name="webtitle">
    <title>样品订单总览</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
        <li><a href="index">样品管理</a></li>
        <li class="active">订单总览</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
    <!--  头部  -->
    <div class="samples-header">
        <div class="samples-row">
            <span>
                <i class="icon-list-alt"></i>
                {$samples.sample_order}
            </span>
            <eq name="samples.sample_type" value="1">
                <small class="tag tag-success">免费</small>
                <else/>
                <small class="tag tag-warning">付费</small>
            </eq>
        </div>
    </div>

    <!--  按钮组  -->
    <div class="samples-toolbar mt-10">
        <!--  按钮组  -->
        <div class="btn-group">
            <if condition="$samples">
                <button type="button" class="btn btn-sm btn-default" data-id="{$samples.id}" data-action="submit">
                    <i class="icon-plane"></i>
                    发起订单
                </button>
                <else/>
                <button type="button" class="btn btn-sm btn-default" disabled>
                    <i class="icon-plane"></i>
                    发起订单
                </button>
            </if>

            <if condition="$samples">
                <button type="button" class="btn btn-sm btn-default" data-id="{$samples.id}" data-action="recall">
                    <i class="icon-double-angle-left"></i>
                    撤回
                </button>
                <else/>
                <button type="button" class="btn btn-sm btn-default" disabled>
                    <i class="icon-double-angle-left"></i>
                    撤回
                </button>
            </if>

            <if condition="$samples">
                <button type="button" class="btn btn-sm btn-default" data-id="{$samples.id}" data-action="delete">
                    <i class="icon-trash"></i>
                    删除
                </button>
                <else/>
                <button type="button" class="btn btn-sm btn-default" disabled>
                    <i class="icon-trash"></i>
                    删除
                </button>
            </if>

            <if condition="$samples">
                <button type="button" class="btn btn-sm btn-default" data-id="{$samples.id}" data-action="edit">
                    <i class="icon-edit"></i>
                    编辑
                </button>
                <else/>
                <button type="button" class="btn btn-sm btn-default" disabled>
                    <i class="icon-edit"></i>
                    编辑
                </button>
            </if>
        </div>
    </div>

    <!--  内容  -->
    <div class="samples-content">
        <div class="layui-tab layui-tab-brief" lay-filter="tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="cover">封面</li>
                <li lay-id="product">产品信息</li>
                <li lay-id="file">附件</li>
            </ul>
            <div class="layui-tab-content">
                <!-- 封面  -->
                <div class="layui-tab-item layui-show">
                    <table class="cover-table">
                        <colgroup>
                            <col width="90">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>订单号：</td>
                                <td>{$samples.sample_order}</td>
                            </tr>
                            <tr>
                                <td>样品类型：</td>
                                <td>
                                    <eq name="samples.sample_type" value="1">
                                        <span class="tag tag-success">免费</span>
                                        <else/>
                                        <span class="tag tag-warning">付费</span>
                                    </eq>
                                </td>
                            </tr>
                            <tr>
                                <td>订单进度：</td>
                                <td>
                                    <eq name="samples.sample_type" value="1">

                                        <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                            <div class="layui-progress-bar layui-progress-success" lay-percent="{$samples.sample_progress}%"></div>
                                        </div>
                                        <else/>

                                        <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                            <div class="layui-progress-bar layui-progress-warning" lay-percent="{$samples.sample_progress}%"></div>
                                        </div>
                                    </eq>
                                </td>
                            </tr>
                            <tr>
                                <td>销售人员：</td>
                                <td>{$samples.sales_name}</td>
                            </tr>
                            <tr>
                                <td>创建时间：</td>
                                <td>{$samples.create_time|date="Y-m-d H:i:s",###}</td>
                            </tr>
                            <tr>
                                <td>更新时间：</td>
                                <td>
                                    <notempty name="samples.update_time">
                                        {$samples.update_time|date="Y-m-d H:i:s",###}
                                    </notempty>
                                </td>
                            </tr>
                            <tr>
                                <td>发起时间：</td>
                                <td>
                                    <notempty name="samples.start_time">
                                        {$samples.start_time|date="Y-m-d H:i:s",###}
                                    </notempty>
                                </td>
                            </tr>
                            <tr>
                                <td>完成时间：</td>
                                <td>
                                    <notempty name="samples.complete_time">
                                        {$samples.complete_time|date="Y-m-d H:i:s",###}
                                    </notempty>
                                </td>
                            </tr>
                            <tr>
                                <td>总耗时：</td>
                                <td>
                                    <notempty name="samples.total_time">
                                        {:time2Units($samples['total_time'])}
                                    </notempty>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 产品信息  -->
                <div class="layui-tab-item">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>产品类型</th>
                                <th>产品型号</th>
                                <th>产品经理</th>
                                <th>模块数量</th>
                                <th>客户名称</th>
                                <th>设备品牌</th>
                                <th>设备型号</th>
                                <th>当前进度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <volist name="samples.details" id="vo">
                                <tr>
                                    <td>{$vo.product_type}</td>
                                    <td>
                                        <a href="/Samples/show?id={$vo.id}">{$vo.product_model}</a>
                                    </td>
                                    <td>{$vo.manager_name}</td>
                                    <td>{$vo.count}</td>
                                    <td>{$vo.customer}</td>
                                    <td>{$vo.brand}</td>
                                    <td>{$vo.model}</td>
                                    <td>
                                        <if condition="$vo['product_progress']['progress_value'] lt 10">
                                            <span class="tag">{$vo.product_progress.progress_label}</span>
                                            <else/>
                                            <span class="tag tag-success">{$vo.product_progress.progress_label}</span>
                                        </if>
                                    </td>
                                </tr>
                            </volist>
                        </tbody>
                    </table>
                </div>

                <!-- 附件  -->
                <div class="layui-tab-item">
                    <notempty name="samples.files">
                        <volist name="samples.files" id="vo">
                            <div class="file-item">
                                <div class="file-info">
                                    <switch name="vo.file_type">
                                        <case value="1">
                                            <i class="file-icon file-icon-ext-xls"></i>
                                            <a href="" target="_blank" title="{$vo.file_title}.xls">{$vo.file_title}.xls</a>
                                        </case>
                                        <case value="2">
                                            <i class="file-icon file-icon-ext-xlsx"></i>
                                            <a href="" target="_blank" title="{$vo.file_title}.xlsx">{$vo.file_title}.xlsx</a>
                                        </case>
                                        <case value="3">
                                            <i class="file-icon file-icon-ext-pdf"></i>
                                            <a href="" target="_blank" title="{$vo.file_title}.pdf">{$vo.file_title}.pdf</a>
                                        </case>
                                        <case value="4">
                                            <i class="file-icon file-icon-ext-doc"></i>
                                            <a href="" target="_blank" title="{$vo.file_title}.doc">{$vo.file_title}.doc</a>
                                        </case>
                                        <case value="5">
                                            <i class="file-icon file-icon-ext-docx"></i>
                                            <a href="" target="_blank" title="{$vo.file_title}.docx">{$vo.file_title}.docx</a>
                                        </case>
                                        <case value="6">
                                            <i class="file-icon file-icon-ext-zip"></i>
                                            <a href="" target="_blank" title="{$vo.file_title}.zip">{$vo.file_title}.zip</a>
                                        </case>
                                    </switch>
                                </div>
                            </div>
                        </volist>
                        <else/>
                        <div class="no-info"></div>
                    </notempty>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="scripts">
    <script>
        $(function () {
            layui.use(['element','layer'],function(){
                var element = layui.element,
                    layer = layui.layer;

                var layid = location.hash.replace(/^#tab=/, '');
                element.tabChange('tab', layid);

                //监听Tab切换，以改变地址hash值
                element.on('tab(tab)', function(){
                    location.hash = 'tab='+ this.getAttribute('lay-id');
                });

                //点击按钮组
                $('button[type=button]').click(function () {

                    var data = {};

                    data.action = $(this).attr('data-action'); //获取点击动作
                    data.id = $(this).attr('data-id'); //获取地址栏上该订单的id

                    //发起订单
                    if (data.action === 'submit') {
                        console.log(data);
                        layer.confirm("发起评审后将不能再修改，确定要发起评审吗？", {icon:3, title: "提示"}, function(index) {

                            submit(data);
                            layer.close(index);
                        });
                    }

                    //撤回
                    if (data.action === 'recall') {
                        console.log(data);
                        layer.confirm("撤回后评审将终止且评审记录将会被清除，确定要撤回吗？",{icon: 3, title: "提示"},function (index) {

                            submit(data);
                            layer.close(index);
                        })
                    }

                    //删除
                    if (data.action === 'delete') {
                        console.log(data);
                        layer.confirm("删除后将无法在恢复，确定要删除吗？",{icon: 3, title: "提示"},function (index) {

                            submit(data);
                            layer.close(index);
                        })

                    }

                    //编辑
                    if (data.action === 'edit') {
                        console.log(data);
                        //跳转到编辑页
                        location.href = "edit" + "?id=" + data.id;
                    }
                });

                //请求
                function submit(data) {
                    layer.load(2, { shade : [0.5,'#fff'] });
                    $.post("" , data, function (response) {
                        if (response.code) {
                            layer.closeAll();
                            layer.msg(response.msg, {icon: 2});
                        } else {
                            //do something
                        }
                    }, "json");
                }
            })
        })
    </script>
</block>